<style>
    #ex_slide_<{$widgets_id}>{ 
        width:206px;
        height:476px;
        overflow:hidden;
        position:relative;
    }
    #ex_slide_<{$widgets_id}> ol li{
        width:188px;
        height:476px;
        list-style:none; 
        display:block;
        overflow:hidden;
        border:0;
        margin:0 9px;
    }
    #ex_slide_<{$widgets_id}> .slide-trigger{
        position:absolute; 
        z-index:555;
    }
    .slide-trigger{bottom:10px;right:10px;}
    .slide-trigger li{
        float:left;
        width:15px;
        height:15px;
        line-height:15px;
        color:#000;
        background:#dcdddd;
        opacity:1;
        text-align:center;
        margin-left:8px;
        cursor:pointer;
        border-radius:50% 50% 50% 50% }
    .slide-trigger li.active{background:#317EE7;color:#ffffff}
</style>
<div style="width:206px;height:476px;" class="index_brand_roll">
    <div id="ex_slide_<{$widgets_id}>">
        <ol class="switchable-content clearfix">
            <{foreach from=$data item=parent key=parentId}>
                <li class="switchable-panel">
                    <{foreach from=$parent item=item key=key}>
                        <a href="<{link app=b2c ctl=site_brand act=index arg0=$item.brand_id}>">
                            <img src="images/transparent.gif" lazyload="<{$item.brand_logo|storager:''}>" class="img-lazyload" title="<{$item.brand_name}>" width="186" height="88">
                        </a>
                    <{/foreach}>
                </li>
            <{/foreach}>
        </ol>
        <ul class="switchable-triggerBox slide-trigger">
          <{assign var=countnum value="1"}>
          <{foreach from=$data item=parent key=parentId}>
                <li></li> 
          <{/foreach}> 
        </ul>
    </div>
</div>
<script>
    new Switchable('ex_slide_<{$widgets_id}>',{
        effect:'scrollx',
        autoplay:'true'
    });
</script>
